<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ichiColor Demo</title>
    <link rel="stylesheet" href="./Ex-morphogen/exmo_main.css">
    <link rel="stylesheet" href="./Ex-morphogen/icon_font/style.css">
    <script src="vue-color-cylinder/lodash.js"></script>

</head>
<body id="body"
      style="padding: 40px 100px;      background: #f9f9f9;  max-width: 800px;   position: absolute;   right: 0; left: 0; margin: auto; padding: 50px 100px;">


<!--IchiColor(<input v-model="colors[0]" type="text" class="exmo_input_text" list="team_list">) =-->
<!--{{colors[0]|ichiColor|json}}-->


<div id="vcc">
    <vue-color-cylinder v-bind:ichi_color.sync="cc"></vue-color-cylinder>
</div>


<div style="max-width: 800px" id="colordesk">
    <div>


        <div class="title-show">
            <h2 v-on:click="utime">ichiColor.{{showProperty}}</h2>
            <div class="valuebox">= {{showValue}}</div>
        </div>

        <h4>响应式的 JavaScript 色彩计算模块示例 </h4>
        <div class="githublogo">

            <p><a href="https://travis-ci.org/nullice/ichiColor"><img
                    src="https://travis-ci.org/nullice/ichiColor.svg?branch=master" alt="Build Status" title=""/></a>
                <a href="https://coveralls.io/github/nullice/ichiColor?branch=master"><img
                        src="https://coveralls.io/repos/github/nullice/ichiColor/badge.svg?branch=master"
                        alt="Coverage Status" title=""/></a>
                <a href="https://www.npmjs.com/package/ichi-color"><img
                        src="https://img.shields.io/npm/v/ichi-color.svg" alt="npm" title=""/></a>
                <a href="https://github.com/nullice/ichiColor/releases"><img
                        src="https://img.shields.io/github/release/nullice/ichiColor.svg" alt="GitHub release"
                        title=""/></a>
            </p>

            <span style="    vertical-align: sub;">
                <a class="github-button"
                   href="https://github.com/nullice/ichiColor"
                   data-style="mega"
                   data-count-href="/nullice/ichiColor/stargazers"
                   data-count-api="/repos/nullice/ichiColor#stargazers_count"
                   data-count-aria-label="# stargazers on GitHub"
                   aria-label="Star nullice/ichiColor on GitHub">Star</a></span>

        </div>
        <br>


        <div style="width: 200px;  height: 40px; background: {{scolor1.hex}};"></div>

        R:<input v-model="scolor1.r" type="text" class="exmo_input_text">
        G:<input v-model="scolor1.g" type="text" class="exmo_input_text">
        B:<input v-model="scolor1.b" type="text" class="exmo_input_text">
        <br>
        int:<input v-model="scolor1.int" type="text" class="exmo_input_text">
        hex:<input v-model="scolor1.hex" type="text" class="exmo_input_text">
        ahex:<input v-model="scolor1.ahex" type="text" class="exmo_input_text">
        <br>
        rgba:<input v-model="scolor1.rgba" style="width: 180px;" type="text" class="exmo_input_text">

        <br>
        int:<input style="width: 200px;" max="16777215" min="0" v-model="scolor1.int" type="range" class="exmo_range">{{scolor1.int}}

        <br> <br>
        A:<input max="1.0" min="0.0" step='.01' v-model="scolor1.alpha" type="range" class="exmo_range">{{scolor1.alpha}}
        <br>
        R:<input max="255" min="0" v-model="scolor1.r" type="range" class="exmo_range">{{scolor1.r}}
        <br>
        G:<input max="255" min="0" v-model="scolor1.g" type="range" class="exmo_range">{{scolor1.g}}
        <br>
        B:<input max="255" min="0" v-model="scolor1.b" type="range" class="exmo_range">{{scolor1.b}}


        <br> <br>
        H:<input max="360" min="0" v-model="scolor1.hsv.h" type="range" class="exmo_range">{{scolor1.hsv.h}}
        <br>
        S:<input max="100" min="0" v-model="scolor1.hsv.s" type="range" class="exmo_range">{{scolor1.hsv.s}}
        <br>
        V:<input max="100" min="0" v-model="scolor1.hsv.v" type="range" class="exmo_range">{{scolor1.hsv.v}}

        <br> <br>
        H:<input max="360" min="0" v-model="scolor1.hsl.h" type="range" class="exmo_range">{{scolor1.hsl.h}}
        <br>
        S:<input max="100" min="0" v-model="scolor1.hsl.s" type="range" class="exmo_range">{{scolor1.hsl.s}}
        <br>
        L:<input max="100" min="0" v-model="scolor1.hsl.l" type="range" class="exmo_range">{{scolor1.hsl.l}}

        <br> <br>
        H:<input max="360" min="0" v-model="scolor1.hwb.h" type="range" class="exmo_range">{{scolor1.hwb.h}}
        <br>
        W:<input max="100" min="0" v-model="scolor1.hwb.w" type="range" class="exmo_range">{{scolor1.hwb.w}}
        <br>
        B:<input max="100" min="0" v-model="scolor1.hwb.b" type="range" class="exmo_range">{{scolor1.hwb.b}}

        <br> <br>
        H:<input max="360" min="0" v-model="scolor1.hwb.h" type="range" class="exmo_range">{{scolor1.hwb.h}}
        <br>
        W:<input max="100" min="0" v-model="scolor1.hwb.w" type="range" class="exmo_range">{{scolor1.hwb.w}}
        <br>
        B:<input max="100" min="0" v-model="scolor1.hwb.b" type="range" class="exmo_range">{{scolor1.hwb.b}}


    </div>

    <div class="object"
         style="font-size: 12px;color: #949494;padding: 30px 0; position: absolute; top:30px;right: 30px">

        <div class="ex" style="width: 300px;">
            <h4>ichi-color-extension</h4>
            <br>
            <label class="exmo_checkbox">
                <input type="checkbox" v-model="scolor1.__ex_enable"> enable
                <div class="exmo_checkbox_shadow"></div>
            </label>
            <br>
            <div style="font-size: 10px"> HSL255 (microsoft office)</div>
            H:<input max="255" min="0" v-model="scolor1.ex.hsl255.h" type="range" class="exmo_range">{{scolor1.ex.hsl255.h}}
            <br>
            S:<input max="255" min="0" v-model="scolor1.ex.hsl255.s" type="range" class="exmo_range">{{scolor1.ex.hsl255.s}}
            <br>
            L:<input max="255" min="0" v-model="scolor1.ex.hsl255.l" type="range" class="exmo_range">{{scolor1.ex.hsl255.l}}

            <br><br>
            <div style="font-size: 10px"> HSL240 (windows system)</div>
            H:<input max="239" min="0" v-model="scolor1.ex.hsl240.h" type="range" class="exmo_range">{{scolor1.ex.hsl240.h}}
            <br>
            S:<input max="240" min="0" v-model="scolor1.ex.hsl240.s" type="range" class="exmo_range">{{scolor1.ex.hsl240.s}}
            <br>
            L:<input max="240" min="0" v-model="scolor1.ex.hsl240.l" type="range" class="exmo_range">{{scolor1.ex.hsl240.l}}

            <br> <br>
            <div style="font-size: 10px"> Lab (Photoshop D50)</div>
            L:<input max="100" min="0" v-model="scolor1.ex.labPs.l" type="range" class="exmo_range">{{scolor1.ex.labPs.l}}
            <br>
            a:<input max="127" min="-128" v-model="scolor1.ex.labPs.a" type="range" class="exmo_range">{{scolor1.ex.labPs.a}}
            <br>
            b:<input max="127" min="-128" v-model="scolor1.ex.labPs.b" type="range" class="exmo_range">{{scolor1.ex.labPs.b}}

            <br> <br>
            <div style="font-size: 10px"> Lab (D65)</div>
            L:<input max="100" min="0" v-model="scolor1.ex.lab.l" type="range" class="exmo_range">{{scolor1.ex.lab.l}}
            <br>
            a:<input max="127" min="-128" v-model="scolor1.ex.lab.a" type="range" class="exmo_range">{{scolor1.ex.lab.a}}
            <br>
            b:<input max="127" min="-128" v-model="scolor1.ex.lab.b" type="range" class="exmo_range">{{scolor1.ex.lab.b}}

            <br><br>
            <div style="font-size: 10px"> LCHab</div>
            L:<input max="100" min="0" v-model="scolor1.ex.LCHab.l" type="range" class="exmo_range">{{scolor1.ex.LCHab.l}}
            <br>
            c:<input max="100" min="0" v-model="scolor1.ex.LCHab.c" type="range" class="exmo_range">{{scolor1.ex.LCHab.c}}
            <br>
            h:<input max="360" min="0" v-model="scolor1.ex.LCHab.h" type="range" class="exmo_range">{{scolor1.ex.LCHab.h}}

            <br><br>
            <div style="font-size: 10px"> XYZ</div>
            X:<input max="1.5" min="0.0" step="0.01" v-model="scolor1.ex.xyz.x" type="range" class="exmo_range">{{scolor1.ex.xyz.x}}
            <br>
            Y:<input max="1.5" min="0.0" step="0.01" v-model="scolor1.ex.xyz.y" type="range" class="exmo_range">{{scolor1.ex.xyz.y}}
            <br>
            Z:<input max="1.5" min="0.0" step="0.01" v-model="scolor1.ex.xyz.z" type="range" class="exmo_range">{{scolor1.ex.xyz.z}}

            <br><br>
            <div style="font-size: 10px"> xyY</div>
            x:<input max="1" min="0.0" step="0.01" v-model="scolor1.ex.xyY.x" type="range" class="exmo_range">{{scolor1.ex.xyY.x}}
            <br>
            y:<input max="1" min="0.0" step="0.01" v-model="scolor1.ex.xyY.y" type="range" class="exmo_range">{{scolor1.ex.xyY.y}}
            <br>
            Y:<input max="1" min="0.0" step="0.01" v-model="scolor1.ex.xyY.Y" type="range" class="exmo_range">{{scolor1.ex.xyY.Y}}

            <br><br>
            <div style="font-size: 10px"> Luv</div>
            L:<input max="100" min="0" v-model="scolor1.ex.luv.l" type="range" class="exmo_range">{{scolor1.ex.luv.l}}
            <br>
            u:<input max="200" min="-150" v-model="scolor1.ex.luv.u" type="range" class="exmo_range">{{scolor1.ex.luv.u}}
            <br>
            v:<input max="200" min="-150" v-model="scolor1.ex.luv.v" type="range" class="exmo_range">{{scolor1.ex.luv.v}}

            <br><br>
            <div style="font-size: 10px"> readonly</div>
            <br>
            Rec709: <span>{{scolor1.ex.theLuma_Rec709}}</span>
            <br>
            Luma_WCAG: <span>{{scolor1.ex.theLuma_WCAG}}</span>
            <br>
            Wavelength: <span>{{scolor1.ex.theWavelength}}</span>

        </div>


        <br> <br> <h4>instance object preview</h4>
        <pre style="font-family: sans-serif;"> {{scolor1|json 4}}</pre>
    </div>
    <br>
    <br>
    <button class="exmo_button" onclick="scanInt()"> 扫描颜色</button>

    <div class="info">
        <p> * 本页面上悬浮的色彩选择器是从 Photoshop 扩展 <a href="https://github.com/nullice/UI-DNA" target="_blank">UI-DNA</a>
            中分离出来的，由于原本是用于嵌入式的 CEF 环境中的，对于不同浏览器兼容性不佳。</p>
        <p>* 本页源码：<a href="https://github.com/nullice/ichiColor/blob/master/demo/demo.html"
                     target="_blank">demo.html</a>
        </p>

        <p> (C) 2017 <a target="_blank" href="http://nullice.com">nullice</a> · <a target="_blank" href="http://weibo.com/nullice/">不知语冰</a></p>
    </div>


</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>

<script src="./vue.js"></script>
<script src="./vs/one-color.js"></script>

<script src="./demo-main.js"></script>
<script src="./vue-color-cylinder/vcc.js"></script>


<style>
    .color-range .range-input .spin-button .spin-up, .color-range .range-input .spin-button .spin-down {
        transform: scale(0.7) translate(-1px, 1px);
    }

    .color-range .range-input .spin-button {
        top: -18px;
    }

    .vue-color-cylinder-main-box {
        margin-top: 64px;
    }

    .vue-color-cylinder-main-box:not(:hover) {

        transition: all .3s;
        opacity: .95;
        background: rgba(255, 255, 255, 0.95);
    }

    .color-range {
        white-space: nowrap;
        cursor: default;
    }

    .color-picker {
        cursor: move;
    }

    h2 {
        font-size: 64px;
        font-weight: 300;
        margin-bottom: 0;
        color: rgba(0, 0, 0, 0.57);
    }

    .githublogo p {
        display: inline-block;
        vertical-align: baseline;
        line-height: 20px;
        margin: 10px 0;
    }

    .info {
        font-size: 12px;
        max-width: 420px;
        color: rgba(0, 0, 0, 0.49);
    }
    p a {
        color: #2fb8b9;
        text-decoration: none;
    }
    .info a:hover {
        color: #fff;
        background: #4be1e2;
        text-decoration: none;
        transition: all .5s;
        padding: 2px 6px;
        box-shadow: 1px 4px 6px 0px rgba(23, 204, 206, 0.51);
        position: relative;
        margin-left: -6px;
        font-size: 13px;
    }

    .exmo_range {
        margin: 5px 8px;
    }

    body#body {
        color: #696969;
        /* letter-spacing: 1px; */
    }

    h4 {
        margin: 0 4px;
        font-size: 14px;
        font-weight: normal;
        color: rgb(185, 185, 185);
        -webkit-user-select: text;
        cursor: default;
        margin-bottom: 1px;
    }

    .title-show {
        width: 470px;
        position: relative;
        overflow: visible;
        margin-bottom: 11px;
    }

    .valuebox {
        text-align: right;
        font-size: 77px;
        color: rgba(88, 81, 82, 0.3);
        opacity: .4;
        font-weight: bold;
        position: absolute;
        right: 0;
        top: -35px;
    }

    .githublogo {
        z-index: 2;
        position: relative;
    }

    body{
        user-select: text;
        -webkit-user-select:text ;
    }

</style>
</body>
</html>
